<template>
  <el-form class="form-wrap">
    <template v-for="item in formItems">
      <el-form-item
        v-if="diffMap[item.prop]"
        :key="item.prop"
        :style="`width:${formItemWidth}`"
        class="form-row-wrap"
      >
        <el-row type="flex" justify="end" slot="label" :style="`width: ${labelWidth}`">
          <div>
            <el-tag type="warning">有修改</el-tag>
            <el-divider direction="vertical" />
          </div>
          <div class="form-item-label">{{ `${item.label}：` }}</div>
        </el-row>
        <el-row type="flex" class="edit-tag-wrap">
          <TagTooltip
            isTag
            class="show-tag"
            :style="`maxWidth: ${tagMaxWidth}`"
            :textContent="getItemOldValue(item)"
          >
            <span slot="label-tag">原值：</span>
          </TagTooltip>
          <TagTooltip
            isTag
            class="show-tag"
            :style="`maxWidth: ${tagMaxWidth}`"
            :textContent="getItemNewValue(item)"
          >
            <span slot="label-tag">现值：</span>
          </TagTooltip>
        </el-row>
      </el-form-item>
    </template>
  </el-form>
</template>
<script>
import TagTooltip from '@/components/AuditShowPage/TagTooltip';
import { ALL_FORM_ITEMS } from '../../constants/viewHostory';
export default {
  components: { TagTooltip },
  props: {
    diffMap: {
      type: Object,
      default: () => ({})
    },
    labelWidth: {
      type: String,
      default: '200px'
    },
    // form-item的宽度
    formItemWidth: {
      type: String,
      default: '60%'
    },
    // tag展示文本的宽度
    tagMaxWidth: {
      type: String,
      default: '200px'
    },
  },
  data () {
    return {
      formItems: ALL_FORM_ITEMS
    }
  },
  methods: {
    // 获取原值
    getItemOldValue (item) {
      const oldValue = this.diffMap[item.prop]?.oldValue ?? ''
      return oldValue
    },
    // 获取现值
    getItemNewValue (item) {
      const newValue = this.diffMap[item.prop]?.newValue ?? ''
      return newValue
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-form-item {
  margin-bottom: 10px;
}
.edit-tag-wrap {
  margin-top: 3px;
  :nth-child(2) {
    margin-left: 10px;
  }
}
.form-row-wrap {
  display: flex;
}
.form-item-label {
  margin-right: 5px;
}
.show-tag {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

